<template>
	<div class="tmpl">
		<!-- 利用mui中的 图文列表样式实现新闻列表 -->
		<div class="title">
			缩略图居左
		</div>
		<ul class="mui-table-view">
			<li v-for='item in list' class="mui-table-view-cell mui-media">
				<router-link v-bind='{to:"/news/newsinfo/" + item.id}'>
					<img class="mui-media-object mui-pull-left" :src="item.img_url">
					<div class="mui-media-body">
						{{item.title}}
						<p class='mui-ellipsis'>
							发表时间：{{item.add_time | fmtdate('YYYY-MM-DD')}}
							<span class='right'>点击数：{{item.click}}</span>
						</p>
					</div>
				</router-link>
			</li>
		</ul>
		

</template>

<script >
	import common from '../../kits/common.js';
	export default{
		data(){
			return{
				list:[
					
    			]
			}
		},
		created(){
			this.getnewslist();//当前组件创建完毕后，加载组件
		},
		methods:{
			getnewslist(){
				//1.0利用vue-resource请求到的图文资讯列表
				var url = common.apihost+'/api/getnewslist';
				this.$http.get(url).then(
						(res)=>{
							this.list = res.body.message;
						},
						(res)=>{
							console.log('图文资讯获取失败')	;
						},
					)
				//2.0 列表数据赋值给list属性
			}
		}
	}
	
</script>

<style scoped>
	.mui-table-view>mui-media-object {
		max-width: 62px;
		height: 62px;
		line-height: 62px;
	}
	.mui-table-view-cell {
		padding-left: 10px;
	}
	.mui-media-body {
		font-size: 12px;
	}
	.mui-ellipsis {
		position: relative;
		color: #0094ff;
		font-size: 12px;
	}
	.right {
		position: absolute;
		top: 0px;
		right: 20px;
	}
</style>